<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>科新机电招标需求</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        /* 样式表 */
        .pretty-table {
            width: 100%; /* 表格宽度为100% */
            border-collapse: collapse; /* 合并相邻的边框 */
            margin-top: 20px; /* 上外边距 */
        }

        .pretty-table th, .pretty-table td {
            padding: 8px; /* 内边距 */
            text-align: left; /* 文本左对齐 */
            border-bottom: 1px solid #ddd; /* 底部边框 */
        }

        .pretty-table th {
            background-color: #f2f2f2; /* 表头背景色 */
            font-weight: bold; /* 字体加粗 */
        }

        .pretty-table tr:nth-child(even) {
            background-color: #f9f9f9; /* 偶数行背景色 */
        }

        /* 可以添加更多样式，如鼠标悬停效果等 */
        .pretty-table tr:hover {
            background-color: #ddd; /* 鼠标悬停时行背景色 */
        }
    </style>
</head>

<body>
<table id="data-table" class="pretty-table">
    <thead>
    <tr>
        <th>单号</th>
        <th>发布日期</th>
        <th>截至日期</th>
        <th>产品编码</th>
        <th>产品名称</th>
        <th>产品种类</th>
        <th>操作</th>
        <!-- 添加其他表头 -->
    </tr>
    </thead>
    <tbody>
    <!-- 表格数据将在这里动态添加 -->
    </tbody>
</table>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "system/ytendereqe";
    var countlUrl=prefix + "/maindata";
    var downFlg='';
    window.onload = function() {
        console.log("进入window.onload");
        // 当页面加载完成后执行此函数
        initData();
    };

    function initData() {
        const apiUrl = countlUrl;
        // 创建一个FormData对象来构建请求体
        const formData = new FormData();
        formData.append('ynum0', 'YTRKX2406006'); // 添加你要传递的参数
        const dataToSend = {
            ynum0: 'YTRKX2406006'
        };
        console.log("接口apiUrl",apiUrl);
        fetch(apiUrl, {
            method: 'POST', // 指定请求方法为POST
            body: '',//JSON.stringify(dataToSend)  , // 设置请求体为表单数据
            headers: {
                'Content-Type': 'application/json' // 设置请求头，如果是JSON数据，则为'application/json'
            }
        }).then(response => {
            // console.log("接口response",response);
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // 解析返回的JSON数据
        }) // 解析JSON响应
            .then(data => {
                // 假设data是一个包含多个对象的数组，每个对象代表一行数据
                const tableBody = document.querySelector('#data-table tbody');
                // 清空表格体中的数据（如果有的话）
                tableBody.innerHTML = '';
                console.log("接口data",data);
                // 遍历数据并添加到表格中
                data.forEach(item => {
                    downFlg="";
                    if(item.yfilename==null  ||item.yfilename.trim().length==0){
                        downFlg='hidden';
                    }
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.ynum0}</td>
                        <td>${item.ydat0}</td>
                        <td>${item.ydatend0}</td>
                        <td>${item.yitm0}</td>
                        <td>${item.itmdes1}</td>
                        <td>${item.tclaxx}</td>
                        <td><a class="dynamic-link btn ${downFlg}" href="javascript:void(0)" ><i class="fa"></i>下载附件</a></td>
                        <!-- 添加其他单元格数据 -->
                    `;
                    const dynamicLink = row.querySelector('.dynamic-link');
                    dynamicLink.addEventListener('click', function(event) {
                        // 阻止默认的链接行为（如果href="#"）
                        event.preventDefault();
                        // 在这里处理点击事件，可以传递值
                        downloadFile(item.ynum0);
                    });

                    // console.log("接口row",row);
                    tableBody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    };
    //下载文件
    function downloadFile(value){
        console.log("下载文件",value);
        window.location.href = prefix+ "/initdownload?resource=" + value;
    }
</script>
</body>
</html>
